<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; //路由器
import { Dialog } from '@vant/compat';
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
//显示弹出层
const showTop = ref(false);
//跳转到个人页面
function toPersonalView() {
  router.push("/personal");
}
//跳转到首页
function toFirstPageView() {
  router.push("/");
}
//跳转到商品分类页面
function toGoodsType() {
  router.push("/goodstype");
}
//跳转到发布闲置页面
function toPublishView() {
  router.push("/fabuxianzhi");
}
//跳转到消息页面
function toMessageView() {
  router.push("/messagelist");
}
// 弹出对话框
function toFans(){
  Dialog({ title: '提示', message: '关注成功' });
}
</script>
<template>
  <van-sticky>
    <van-nav-bar title="我的关注" left-text="返回" left-arrow @click-left="toPersonalView" :border="false" class="nav_bar">
      <template #right>
        <van-icon name="wap-nav" color="black" size="20" @click="showTop = true" />
      </template>
    </van-nav-bar>
  </van-sticky>
  <div>
    <van-notice-bar color="#1989fa" background="#ecf9ff">
      您还没有关注，去关注宝藏博主吧~
    </van-notice-bar>
  </div><br>

  

  <nut-empty description="“我还没有关注？！”"></nut-empty>
  <nut-divider dashed :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 
    您可能感兴趣的人
  </nut-divider>
  <!-- <div>
        <van-nav-bar title="为您推荐" style="color: blue;"/>
    </div> -->
  <van-row>
    <van-col span="5">
      <!-- 徽标 有消息会提示 -->
      <!-- 头像 -->
      <van-image round src="https://img1.baidu.com/it/u=1331914148,958252573&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1000" height="60" width="60" />

    </van-col>
    <van-col offset="0">
      <van-row>
        <p style="font-size: 16px;">刘诗诗</p>
      </van-row>

      <van-row>
        <p style="font-size: 10px;">现居中国内地。女明星 </p>
      </van-row>
    </van-col>
    <van-col offset="5">
      <van-button icon="plus" type="primary" size="small" color="red" @click="toFans">关注</van-button>
    </van-col>
  </van-row>
  <van-row>
    <van-col span="5">
      <!-- 徽标 有消息会提示 -->
      <!-- 头像 -->
      <van-image round src="https://img2.baidu.com/it/u=3973949787,2367512932&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" height="60" width="60" />

    </van-col>
    <van-col>
      <van-row >
        <p style="font-size: 16px;">刘亦菲</p>
      </van-row>

      <van-row>
        <p style="font-size: 10px;"> 现居浙江杭州。女明星 </p>
      </van-row>
    </van-col>
    <van-col offset="5">
      <van-button icon="plus" type="primary" size="small" color="red" @click="toFans">关注</van-button>
    </van-col>
  </van-row>
  <nut-popup position="top" closeable :style="{ height: '20%' }" teleport-disable v-model:visible="showTop" bottom>
    <van-col offset="2">
      <div class="font">快捷入口</div>
    </van-col>
    <nut-row type="flex" justify="space-evenly" class="popup">
      <nut-col :span="4" align="center" @click="toFirstPageView">
        <IconFont name="home" size="30"></IconFont>
        <div>首页</div>
      </nut-col>
      <nut-col :span="4" align="center" @click="toGoodsType">
        <IconFont name="category" size="30"></IconFont>
        <div>分类</div>
      </nut-col>
      <nut-col :span="4" align="center" @click="toPublishView">
        <IconFont name="share-n" size="30"></IconFont>
        <div>发布闲置</div>
      </nut-col>
      <nut-col :span="4" align="center" @click="toMessageView">
        <IconFont name="message" size="30"></IconFont>
        <div>消息</div>
      </nut-col>
      <nut-col :span="4" align="center" @click="toPersonalView">
        <IconFont name="people" size="30"></IconFont>
        <div>个人主页</div>
      </nut-col>
    </nut-row>
  </nut-popup>
</template>
<style scoped>
.nav_bar {
  position: relative;
  top: -10px;
  margin: 0px -10px;
}

.font {
  position: relative;
  top: 20px;
}

.popup {
  position: relative;
  top: 50px;
}
</style>